<template>
  <div>
    <div style="margin: 10px 0;padding-top: 30px" align="center ">
      <el-input v-model="search" placeholder="请输入关键字" @keyup.enter.native="load" style="width: 20%"
                clearable=""></el-input>
      <el-button type="primary" style="margin: 2px " @click="load">查询</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
     >
      <el-table-column
        prop="id"
        label="ID"
        sortable=""
      >
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
      >
      </el-table-column>
      <el-table-column
        prop="nick"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="regtime"
        label="申请时间">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1?'success':''">
            {{scope.row.status === 1? '通过审核': '未审核'}}

          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-check" circle @click="agree(scope.row.id)"></el-button>

        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div style="margin: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>


  </div>
</template>

<script>
  import "../assets/index.css";
  import request from '../utils/request'
  export default {
    name: 'examine',
    data() {
      return {
        form: {},
        status:'',

        search: '',
        //当前页
        currentPage: 1,
        status:2,
        pageSize: 5,
        //总共的数量
        total: 2,
        tableData: []
      }
    },
    created() {
      this.load()
    },
    methods:{
      load() {
        request.get("/user/selectPage", {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            search: this.search,
            status:this.status
          }

        }).then(res => {
          this.tableData = res.data.records
          this.total = res.data.total
        })
      },
      //审核
      agree(id){
        this.$confirm('你确定要通过审核,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '驳回',
          type: 'success'
        }).then(async ()=>{
          request.put("/user/agree/"+id).then(res=>{
            this.$message({
              message:'审核通过',
              type:'success'
            })
            this.load()
          })
        }).catch(()=>{
          this.$message({
            message:"驳回申请",
            type:'success'
          })
        })

      },
      //页码 每页的个数
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.load()
      },
      //改变当前页
      handleCurrentChange(pageNum) {
        this.currentPage = pageNum
        this.load()
      },
    },

  }
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
